<template>
     <el-dialog
      :title="config.title"
      custom-class="bigImg"
      :visible.sync="showDialog"
      width="30%"
      append-to-body
    >
        <div class="img-box">
            <img
                :src="config.url"
                class="img"
            >
        </div>
    </el-dialog>
</template>
<script>
export default {
    props:{
        imgVisible: Boolean,
        options:{
            type: Object,
            default: function () {
                return {}
            }
        }
    },
    data(){
        return {
			showDialog: false
		}
    },
	created(){
		this.showDialog = this.imgVisible;
	},
    computed:{
        config(){
            return {
                title: this.options.title || '图片',
                url: this.options.url,
            }
        }
    },
	watch:{
		showDialog(){
			if(this.showDialog){
				this.$emit('update:imgVisible',true);
			}else{
				this.$emit('update:imgVisible',false);
			}
		},
		imgVisible(){
			this.showDialog = this.imgVisible;
		}
	}
}
</script>
<style scoped>
.img-box{
    display: flex;
    justify-content: center;
    align-items: center;
}
.img{
    max-width: 100%;
    max-height: 100%;
}
</style>